<template>
  <el-card>
    <div class="top">
      <div class="left">
        <el-form>
          <el-form-item>
            <span>当前无人机：</span>
            <el-select v-model="ruleForm.uavId" placeholder="请选择无人机">
              <el-option
                label="大疆Mavic2 行业1"
                value="大疆Mavic2 行业1"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <div class="info">
      <el-card class="box-card" shadow="never">
        <video
          ref="vPull"
          controls
          autoplay
          muted
          width="80%"
          height="80%"
          class="video"
        ></video>
      </el-card>
    </div>
  </el-card>
</template>
  
  <script>
import flv from "flv.js";
export default {
  name: "nav-video",
  data() {
    return {
      player: null,
      info: null,
      ruleForm: {
        uavId: "",
      },
    };
  },
  mounted() {
    this.play("http://47.100.121.5/live?port=1935&app=myapp&stream=test");
  },
  methods: {
    showvideo() {
      this.play("http://47.100.121.5/live?port=1935&app=myapp&stream=test");
    },
    play(urls) {
      let video = this.$refs.vPull; //定义播放路径
      if (flv.isSupported()) {
        this.player = flv.createPlayer(
          {
            type: "flv",
            isLive: true,
            url: urls,
          },
          {
            enableWorker: false, //不启用分离线程
            enableStashBuffer: false, //关闭IO隐藏缓冲区
            isLive: true,
            lazyLoad: false,
          }
        );
      } else {
        console.log("不支持的格式");
        return;
      }
      this.player.attachMediaElement(video);
      this.player.load();
      this.player.play();
    },
    destruction() {
      //销毁对象
      if (this.player) {
        this.player.pause();
        this.player.destroy();
        this.player = null;
      }
    },
  },
};
</script>
  
  <style scoped>
.top {
  height: 100px;
}
.left {
  float: left;
  width: 50%;
}
.text1 {
  border-color: black;
  text-align: center;
  font-family: "Microsoft YaHei";
  font-weight: 600;
  font-size: 25px;
  margin-left: 50%;
  margin-top: auto;
  margin-bottom: auto;
}
.right {
  overflow: auto;
}
.text2 {
  font-size: 30px;
  margin-left: 20%;
  margin-top: 10px;
  margin-bottom: auto;
}
.info {
  height: 980px;
}
.box-card {
  height: 900px;
}
.video {
  margin-top: 10px;
  margin-left: 10%;
  margin-right: auto;
}
</style>